<template>
	<view class="body">
		<u-navbar title="个人中心" titleStyle='color:#fff' bgColor="transparent" left-icon-color="transparent"></u-navbar>
		<view class="navbar bg-orange d-b-c pb80 pl20 pr20">
			<view class="left d-s-c flex-1 mr20">
				<u-avatar size="80"></u-avatar>
				<view class="ml20 white">
					<view class="f40 fb">微信用户</view>
					<view class="d-s-c">
						<text class="mr20">初始等级</text>
						<view class="d-s-c opacity5">
							<text class="mr5">会员等级</text>
							<u-icon name="arrow-right" size="15" color="#fff"></u-icon>
						</view>
					</view>
					<view class="white d-s-c">
						<view class="mr20 d-s-c mr20">
							<image class="icon mr5" src="@/static/image/my_1.png" mode="widthFix"></image>
							<view>积分：0</view>
						</view>
						<view class="mr20 d-s-c">
							<image class="icon mr5" src="@/static/image/my_2.png" mode="widthFix"></image>
							<view>价值：￥0.00</view>
						</view>
					</view>
				</view>
			</view>
			<image @click="jump('/pages/my/qrCode')" src="@/static/image/qrcode.png" mode="widthFix" class="qrcode">
			</image>
		</view>
		<view class="card p20 white ml30 mr30 mb30">
			<view class="d-b-c">
				<view class="">e账户</view>
				<view class="">卡余额：0.00</view>
			</view>
			<view class="line mt30 mb30 pb30 f40">1234 5678 9101 1121 314</view>
			<view class="d-b-c">
				<view class="d-c-c flex-1">
					<u-icon name="/static/image/my_icon1.png" size="14"></u-icon>
					<text class="ml5">充值</text>
				</view>
				<view class="d-c-c flex-1" @click="jump('/pages/order/list')">
					<u-icon name="/static/image/my_icon2.png" size="14"></u-icon>
					<text class="ml5">订单查询</text>
				</view>
			</view>
		</view>
		<view class="order d-s-c f-w bg-white pt30 pr30 pl30 m30 pb10">
			<view v-for="(item,index) in list" :key="index" class="item d-c-c d-c mb20" @click="jump(item.path)">
				<image :src="item.icon" mode="aspectFit"></image>
				<text class="f32 mt10">{{item.name}}</text>
			</view>
		</view>
		<image src="@/static/image/ad.png" mode="widthFix" class="ww100 pr30 pl30 br20"></image>
		<view class="list ml30 mr30 mt30 bg-white br18">
			<u-cell title="E账户" size="large" icon="/static/image/my_list_1.png" isLink url="/pages/my/ECard"></u-cell>
			<u-cell title="我的一卡通" size="large" icon="/static/image/my_list_2.png" isLink
				url="/pages/my/oneCard"></u-cell>
			<u-cell title="车队管理" size="large" icon="/static/image/my_list_3.png" isLink url="/pages/my/ECard"></u-cell>
			<u-cell title="设置" size="large" icon="/static/image/my_list_4.png" isLink url="/pages/my/setting"></u-cell>
			<u-cell title="意见反馈" size="large" icon="/static/image/my_list_5.png" isLink
				url="/pages/my/opinion"></u-cell>
			<u-cell title="消息通知" size="large" icon="/static/image/my_list_6.png" isLink url="/pages/my/ECard"></u-cell>
		</view>
		<view class="tc f20 m30">客服热线：400-000-0000</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: "空中充值",
					icon: '/static/image/order_1.png'
				}, {
					name: "优惠券",
					icon: '/static/image/order_2.png'
				}, {
					name: "油气小管家",
					icon: '/static/image/order_3.png'
				}, {
					name: "积分商城",
					icon: '/static/image/order_4.png'
				}, {
					name: "今日油气价",
					icon: '/static/image/order_5.png',
					path: "/pages/my/today"
				}, {
					name: "发票",
					icon: '/static/image/order_6.png',
					path: "/pages/my/invoice"
				}, {
					name: "加入我们",
					icon: '/static/image/order_7.png',
					path: "/pages/my/join"
				}]
			}
		},
		methods: {

		}
	}
</script>

<style scoped lang="scss">
	.order {
		border-radius: 0 0 30rpx 30rpx;

		.item {
			width: 25%;

			image {
				width: 80rpx;
				height: 80rpx;
			}
		}
	}

	.card {
		border-radius: 20rpx 20rpx 0 0;
		overflow: hidden;
		background-color: #165dff;
		margin-top: -60rpx;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, .2);
	}

	.navbar {
		padding-top: 150rpx;
		border-radius: 0 0 20rpx 20rpx;

		.qrcode {
			width: 80rpx;
		}

		.icon {
			width: 30rpx;
		}
	}


	.body {
		min-height: 100vh;
		background-color: #f4f4f4;
	}
</style>